<template>
  <div class="child" :class="{ childE: !isLast }">
    <!-- <div class="vertical-line" v-if="!isFirst">
      <div class="line-segment"></div>
    </div> -->

    <div class="horizontal-line" :class="{ 'line-end': !hasChildren }"></div>

    <div class="strategy-node">
      <div class="node-header">
        <div class="node-icon">
          <el-popover placement="bottom" width="700" trigger="click">
            <div class="popover-box">
              <div
                class="setting-item"
                v-for="(item, index) in proplist"
                :key="index"
              >
                <el-checkbox v-model="item.choose">数据{{ index }}</el-checkbox>
                <el-input
                  style="margin-left: 5px"
                  v-model="item.data"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>

            <i class="el-icon-s-tools" slot="reference"></i>
          </el-popover>
        </div>
        <div class="node-title">{{ treeData.name }}</div>
        <div class="node-status">
          <el-tag type="warning" size="mini">策略</el-tag>
        </div>
      </div>
      <div class="node-details">
        <div class="detail-item">
          <span class="detail-label">参数1：</span>
          <span class="detail-value">{{ treeData.date }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">参数2：</span>
          <span class="detail-value">{{ treeData.address }}</span>
        </div>
      </div>
    </div>

    <div class="horizontal-line" v-if="hasChildren"></div>

    <div class="child-box" v-if="hasChildren">
      <Child
        v-for="(item, index) in treeData.children"
        :key="item.id"
        :treeData="item"
        :isFirst="index === 0"
        :isLast="index === treeData.children.length - 1"
      />
    </div>
  </div>
</template>

<script>
import Child from "./child.vue";
export default {
  name: "Child",
  components: {
    Child,
  },
  props: {
    treeData: {
      type: Object,
      default: () => {},
    },
    isLast: {
      type: Boolean,
      default: false,
    },
    isFirst: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      proplist: [
        { data: "" },
        { data: "" },
        { data: "" },
        { data: "" },
        { data: "" },
      ],
    };
  },
  computed: {
    hasChildren() {
      return this.treeData.children && this.treeData.children.length;
    },
  },
  created() {
    console.log(this.isFirst, this.isLast);
  },
};
</script>

<style lang="scss" scoped>
.childE {
  border-left: 2px solid;
  border-image-source: linear-gradient(90deg, #c3cfe2, #f5f7fa);
  border-image-slice: 1;
  padding-bottom: 20px;
}
.child {
  display: flex;
  align-items: flex-start;
  width: 100%;
  position: relative;

  .vertical-line {
    position: absolute;
    left: -20px;
    top: 0;
    width: 2px;
    height: 100%;
    z-index: 1;

    .line-segment {
      width: 100%;
      height: 40px;
      background: linear-gradient(180deg, #c3cfe2, #f5f7fa);
      border-radius: 1px;
    }
  }

  .horizontal-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #c3cfe2, #f5f7fa);
    border-radius: 1px;
    margin: 0 20px 0 0;
    position: relative;
    z-index: 2;

    &.line-end {
      flex: 1;
    }

    &::after {
      content: "";
      position: absolute;
      right: -4px;
      top: -3px;
      width: 8px;
      height: 8px;
      background: #f5f7fa;
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(245, 247, 250, 0.5);
    }
  }

  .strategy-node {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
    border: 2px solid #e8ecff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(232, 236, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
    min-width: 240px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(232, 236, 255, 0.4);
      border-color: #667eea;
    }

    .node-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;

      .node-icon {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
      }

      .node-title {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }

      .node-status {
        .el-tag {
          background: linear-gradient(135deg, #ffecd2, #fcb69f);
          border: 1px solid #fcb69f;
          color: #8b4513;
          font-weight: 500;
        }
      }
    }

    .node-details {
      .detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        .detail-label {
          font-size: 12px;
          color: #606266;
          font-weight: 500;
          min-width: 60px;
        }

        .detail-value {
          font-size: 12px;
          color: #303133;
          font-weight: 400;
        }
      }
    }
  }

  .child-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }
}


.popover-box {
	width: 700px;
	padding: 10px;

	.setting-item {
		padding: 5px 10px;
		display: inline-flex;
		align-items: center;
		width: 33%;
		box-sizing: border-box;
	}
}
</style>
